<template>
    <el-row :gutter="20" style="margin: 0px; padding: 10px; box-sizing: border-box;">
        <!-- 收入分类 -->
        <el-col :span="12">
            <div class="block mt ov">
                <el-tag size="medium" type="primary" class="w300 center">收入分类名称列表</el-tag>
                <el-button icon="el-icon-plus" class="fr" size="mini" type="success" @click="addopen(1)">分类</el-button>
            </div>
            <el-table :data="tableData1" height="600">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="typename" label="分类名称"></el-table-column>
                <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button @click="deltype(scope.row.id,scope.row,1)" icon="el-icon-delete" type="danger" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <!-- 支出分类 -->
        <el-col :span="12">
            <div class="block mt ov">
                <el-tag size="medium" type="primary" class="w300 center">支出分类名称列表</el-tag>
                <el-button icon="el-icon-plus" class="fr" size="mini" type="success" @click="addopen(2)">分类</el-button>
            </div>
            <el-table :data="tableData2" height="600">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="typename" label="分类名称"></el-table-column>
                <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button @click="deltype(scope.row.id,scope.row,2)" icon="el-icon-delete" type="danger" size="mini"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>
<script>
import C from '#/src/common/common.js'

export default {
    name: 'costType',
    data() {
        return {
            tableData1: [],
            tableData2: [],
            delid: []
        }
    },
    methods: {
        getmsg: async function() {
            let data = await C.ajax('/shop/cost/getcosttype')
            if (data) {
                var incom = [],
                    outgo = []
                for (var j = 0, datalen = data.length; j < datalen; j++) {
                    if (data[j].type % 2) {
                        incom.push(data[j])
                    } else {
                        outgo.push(data[j])
                    }
                }
                this.tableData1 = incom
                this.tableData2 = outgo
                this.delid = []
            }
        },
        //新增分类
        addopen: async function(type) {
            let tips = type % 2 ? '请输入新增收入名称' : '请输入新增支出名称'
            C.prompt(tips, async(value) => {
                var reg = /^\s*$/g
                if (value === null || reg.test(value)) {
                    return false
                } else {
                    await C.ajax('/shop/cost/addtype', { type: type, typename: value }, 'post')
                    this.getmsg()
                }
            })
        },
        //删除分类
        deltype: function(id, index, type) {
            var that = this
            C.confirm('此操作将永久删除该分类, 是否继续?', async() => {
                //如果delid里面有元素就进行下面的删除
                that.delid.push(id)
                if (this.delid.length) {
                    let data = await C.ajax('/shop/cost/deltype', { del: JSON.stringify(this.delid) }, 'post')
                    if (data) {
                        if (type == 1) {
                            let aaa = that.tableData1.indexOf(index)
                            that.tableData1.splice(aaa, 1)
                        } else {
                            let aaa = that.tableData2.indexOf(index)
                            that.tableData2.splice(aaa, 1)
                        }
                        C.success(data.data.info)
                    }
                    // 将delid置空，重新进行下次操作
                    this.delid = []
                }
            })
        },
    },
    mounted: function() {
        this.getmsg()
    }
}
</script>